<template>
  <div id="globalHeader" class="header-container">
    <a-row :wrap="false" align="middle" class="header-row">
      <!-- Logo和标题区域 -->
      <a-col :flex="['200px', 'none']" class="logo-column">
        <router-link to="/" class="logo-link">
          <div class="title-bar">
            <div class="logo">
              <svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 19V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19Z" stroke="#6c46b0" stroke-width="2"/>
                <path d="M8.5 8C9.32843 8 10 7.32843 10 6.5C10 5.67157 9.32843 5 8.5 5C7.67157 5 7 5.67157 7 6.5C7 7.32843 7.67157 8 8.5 8Z" fill="#6c46b0"/>
                <path d="M16.5 8C17.3284 8 18 7.32843 18 6.5C18 5.67157 17.3284 5 16.5 5C15.6716 5 15 5.67157 15 6.5C15 7.32843 15.6716 8 16.5 8Z" fill="#6c46b0"/>
                <path d="M12 13C14.2091 13 16 11.2091 16 9C16 6.79086 14.2091 5 12 5C9.79086 5 8 6.79086 8 9C8 11.2091 9.79086 13 12 13Z" fill="#6c46b0"/>
                <path d="M16 18C16 16.3431 13.3137 15 12 15C10.6863 15 8 16.3431 8 18" stroke="#6c46b0" stroke-width="2" stroke-linecap="round"/>
              </svg>
            </div>
            <div class="title">QY云图库</div>
          </div>
        </router-link>
      </a-col>

      <!-- 导航菜单区域 -->
      <a-col flex="auto" class="menu-column">
        <div class="menu-wrapper">
          <a-menu
            v-model:selectedKeys="current"
            mode="horizontal"
            @click="onMenuClick"
            :items="items"
            overflowedIndicator="更多"
            class="main-menu"
          />
        </div>
      </a-col>

      <!-- 用户区域 -->
      <a-col :flex="['120px', 'none']" class="user-column">
        <div class="user-login-status">
          <div v-if="loginUserStore.loginUser.id" class="user-logged-in">
            <a-dropdown>
              <ASpace>
                <a-avatar :src="loginUserStore.loginUser.userAvatar"/>
                {{ loginUserStore.loginUser.userName ?? '无名' }}
              </ASpace>
              <template #overlay>
                <a-menu>
                  <a-menu-item v-if="loginUserStore.loginUser.id" @click="getUserInfo">
                    <UserOutlined/>
                    个人中心
                  </a-menu-item>
                  <a-menu-item @click="doLogout">
                    <LogoutOutlined/>
                    退出登录
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
          <div v-else>
            <a-button type="primary" href="/user/login" class="login-button" style="margin-top: 25px">登录</a-button>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import {computed, h, ref} from 'vue'
import { HomeOutlined, LogoutOutlined, UserOutlined } from '@ant-design/icons-vue'
import {type MenuProps, message} from 'ant-design-vue'
import { useRouter } from 'vue-router'
import {useLoginUserStore} from "@/stores/useLoginUserstore";
import {userLogoutUsingPost} from "@/api/userController";

const router = useRouter()
const current = ref<string[]>([''])
const loginUserStore = useLoginUserStore()

// 处理菜单点击事件
const onMenuClick = ({ key }) => {
  router.push({
    path: key,
  })
}

// 路由变化时更新选中的菜单项
router.afterEach((to) => {
  current.value = [to.path]
})

// 用户注销
const doLogout = async () => {
  const res = await userLogoutUsingPost()
  console.log(res)
  if (res.data.code === 0) {
    loginUserStore.setLoginUser({
      userName: '未登录',
    })
    message.success('退出登录成功')
    await router.push('/user/login')
  } else {
    message.error('退出登录失败，' + res.data.message)
  }
}

// 菜单列表
const originItems = [
  {
    key: '/',
    icon: () => h(HomeOutlined),
    label: '主页',
    title: '主页',
  },
  {
    key: '/admin/userManage',
    label: '用户管理',
    title: '用户管理',
  },
  {
    key: '/add_picture',
    label: '创建图片',
    title: '创建图片',
  },
  {
    key: '/admin/pictureManage',
    label: '图片管理',
    title: '图片管理',
  },
  {
    key: '/admin/spaceManage',
    label: '空间管理',
    title: '空间管理',
  }
]

// 过滤菜单项 - 根据用户权限显示不同菜单
const filterMenus = (menus = [] as MenuProps['items']) => {
  const loginUser = loginUserStore.loginUser
  const isAdmin = loginUser && loginUser.userRole === "admin"
  const isLoggedIn = loginUser && loginUser.id

  return menus?.filter((menu) => {
    // 管理员菜单：仅管理员可见
    if (menu?.key?.startsWith('/admin')) {
      return isAdmin
    }

    // 创建图片：需要登录才能看到
    if (menu?.key === '/add_picture') {
      return isLoggedIn
    }

    // 其他公开菜单
    return true
  })
}

// 展示在菜单的路由数组
const items = computed<MenuProps['items']>(() => filterMenus(originItems))
const getUserInfo = () => {
  router.push('/user/getUserInfo')
}
const goGitee = () => {
  window.open('https://gitee.com/beginning-of-qianyuan', '_blank')
}
</script>

<style scoped>
.header-container {
  width: 100%;
  padding: 0 16px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px rgba(108, 70, 176, 0.15);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.3s ease;
}

.header-container:hover {
  box-shadow: 0 4px 16px rgba(108, 70, 176, 0.2);
}

.header-row {
  height: 64px;
}

.logo-column {
  transition: all 0.3s ease;
}

.logo-link {
  text-decoration: none;
  display: block;
  height: 100%;
}

.title-bar {
  display: flex;
  align-items: center;
  height: 100%;
  transition: all 0.3s ease;
}

.title {
  color: #6c46b0;
  font-size: 1.25rem;
  font-weight: 600;
  margin-left: 16px;
  white-space: nowrap;
  transition: all 0.3s ease;
  background: linear-gradient(90deg, #6c46b0, #9d6ef7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% auto;
  animation: textShine 3s infinite;
}

@keyframes textShine {
  to {
    background-position: 200% center;
  }
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  transform-origin: center;
}

.logo:hover {
  transform: scale(1.05) rotate(5deg);
  filter: drop-shadow(0 0 8px rgba(108, 70, 176, 0.3));
}

.menu-column {
  padding: 0 16px;
}

.menu-wrapper {
  width: 100%;
  overflow-x: auto;
  /* 隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* Chrome, Safari 和 Opera */
.menu-wrapper::-webkit-scrollbar {
  display: none;
}

.main-menu {
  width: 100%;
  padding: 0;
}

/* 菜单项样式优化 */
:deep(.ant-menu-horizontal) {
  border-bottom: none;
}

:deep(.ant-menu-item) {
  margin: 0 8px;
  padding: 0 12px;
  height: 64px;
  line-height: 64px;
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

:deep(.ant-menu-item::after) {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #6c46b0;
  transition: width 0.3s ease;
}

:deep(.ant-menu-item-selected) {
  background-color: rgba(108, 70, 176, 0.1);
  color: #6c46b0 !important;
}

:deep(.ant-menu-item-selected::after) {
  width: 100%;
}

:deep(.ant-menu-item:not(.ant-menu-item-selected):hover) {
  background-color: rgba(108, 70, 176, 0.05);
  color: #6c46b0;
  transform: translateY(-2px);
}

:deep(.ant-menu-item:not(.ant-menu-item-selected):hover::after) {
  width: 100%;
  opacity: 0.6;
}

:deep(.ant-menu-submenu) {
  margin: 0 8px;
  padding: 0 12px;
  height: 64px;
  line-height: 64px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

:deep(.ant-menu-submenu:hover) {
  background-color: rgba(108, 70, 176, 0.05);
  color: #6c46b0;
}

.user-column {
  display: flex;
  justify-content: flex-end;
  padding-right: 16px;
}

.user-login-status {
  display: flex;
  align-items: center;
}

.user-logged-in {
  width: 100%;
}

.user-info {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 20px;
  transition: all 0.3s ease;
  width: 100%;
  justify-content: flex-end;
  position: relative;
}

.user-info:hover {
  background-color: rgba(108, 70, 176, 0.05);
}

.user-avatar {
  transition: all 0.3s ease;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.user-avatar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: all 0.6s ease;
}

.user-info:hover .user-avatar {
  transform: scale(1.1) rotate(3deg);
  border-color: rgba(108, 70, 176, 0.3);
  box-shadow: 0 0 10px rgba(108, 70, 176, 0.2);
}

.user-info:hover .user-avatar::before {
  left: 100%;
}

.user-name {
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 8px;
  font-size: 0.9rem;
  color: #333;
  transition: color 0.3s ease;
}

.user-info:hover .user-name {
  color: #6c46b0;
}

:deep(.user-dropdown-menu) {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(108, 70, 176, 0.15);
  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  border: 1px solid rgba(108, 70, 176, 0.1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

:deep(.logout-item) {
  transition: all 0.3s ease;
}

:deep(.logout-item:hover) {
  background-color: rgba(245, 34, 45, 0.05);
  color: #f5222d;
  transform: translateX(4px);
}

.login-button {
  background: linear-gradient(135deg, #6c46b0, #9d6ef7);
  border-color: #6c46b0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.login-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: all 0.6s ease;
  z-index: -1;
}

.login-button:hover {
  background: linear-gradient(135deg, #7d56c2, #ae8cf7);
  border-color: #7d56c2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 70, 176, 0.3);
}

.login-button:hover::before {
  left: 100%;
}

.login-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(108, 70, 176, 0.2);
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .title {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .title {
    font-size: 1rem;
    margin-left: 12px;
  }

  .user-name {
    display: none;
  }

  :deep(.ant-menu-item) {
    margin: 0 4px;
    padding: 0 8px;
  }
}

@media (max-width: 480px) {
  .title {
    display: none;
  }

  .logo-column {
    flex: ['60px', 'none'] !important;
  }
}
</style>
